<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
   <!--   <wk-nav-bar
        :command-list="commandList"
        :refresh-prev="refreshPrevPage"
        title="公告详情"
        type="oa_announcement"
        @command="handleCommand" /> -->
		<wk-nav-bar
		  :command-list="commandList"
		  :title="typeObj.label"
		  @command="handleCommand" />

      <scroll-view :scroll-y="true" class="container">
        <view v-if="detailData" class="notice-detail-body">
          <view class="notice-detail-title">
            {{ detailData.title || '' }}
          </view>
          <view class="notice-detail-time">
            {{ detailData.createTime || '' }}
          </view>
          <view class="notice-detail-content">
            {{ detailData.content || '' }}
          </view>
        </view>
      </scroll-view>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        :duration="2000"
        type="warning"
        @confirm="handleDelete" />
    </uni-popup>
  </view>
</template>

<script>
  import { announcementById, xunyuanAnnouncementById, zhongbiaoAnnouncementById } from 'API/notice';
  import {QueryById, DeleteNotice} from 'API/oa/notice'

  export default {
    name: 'NoticeDetail',
    data() {
      return {
		  // 导航栏数据
		  commandList: [],
		  typeObj: { label: '详情' },	 
        id: null,
        type: 1,
        detailData: {
          content: ''
        },
        content: '',
        commandList: [
          {label: '编辑', value: 'update', icon: 'wk-edit-pen', auth: 'oa.announcement.update'},
          {label: '删除', value: 'delete', icon: 'wk-bin', auth: 'oa.announcement.delete' }
        ],

        dialogMsg: '',
        routerQuery: {},

        refreshPage: false,
        refreshPrevPage: false
      }
    },
    onLoad(options) {
      console.log('before', options)
      this.routerQuery = options || {}
      this.id = this.routerQuery.id || null
      this.type = this.routerQuery.type || null
      this.getDetail()
    },
    onShow() {
      if (this.refreshPage) {
        this.refreshPage = false
        this.refreshPrevPage = true
        this.getDetail()
      }
    },
    onBackPress(evt) {
      if (evt.from === 'backbutton' && this.refreshPrevPage) {
        this.$refreshAndToPrev(this)
        return true // 返回值为 true 时，表示不执行默认的返回
      }
      return false
    },
    methods: {
		
      stripHtmlTags(html) {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = html;
        return tempDiv.textContent || tempDiv.innerText || '';
      },
		
      /**
       * 获取公告详情
       */
	
      getDetail() {
        console.log(this.type)
		console.log(this.id)
        if (this.type == 4) {
          announcementById({
            id: this.id
          }).then(response => {
            this.detailData = response.data
            const htmlString = response.data.content
            const plainText = this.stripHtmlTags(htmlString);
            this.detailData.content = plainText
          }).catch()
        } else if (this.type == 1) {
          xunyuanAnnouncementById({
            id: this.id
          }).then(response => {
            this.detailData = response.data
            const htmlString = response.data.content
            const plainText = this.stripHtmlTags(htmlString);
            this.detailData.content = plainText
          }).catch()
        } else if (this.type == 2) {
          zhongbiaoAnnouncementById({
            id: this.id
          }).then(response => {
            this.detailData = response.data
            const htmlString = response.data.content
            const plainText = this.stripHtmlTags(htmlString);
            this.detailData.content = plainText
          }).catch()
        }
      },

      /**
       * 更多选项操作
       */
      handleCommand(command) {
        if (!this.detailData || !this.detailData.announcementId) return
        if (command.value === 'update') {
          this.$Router.navigateTo({
            url: '/pages_oa/notice/add',
            query: {
              id: this.id
            }
          })
        } else if (command.value === 'delete') {
          this.dialogMsg = '您确定要删除这条公告吗？'
          this.$refs.popup.open()
        }
      },

      handleDelete() {
        DeleteNotice({
          id: this.id
        }).then(() => {
          this.$toast('删除成功')
          this.$refreshAndToPrev(this)
        }).catch()
      }
    }
  }
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .container {
    width: 100%;
    flex: 1;
    overflow: hidden;

    .notice-detail-body {
      background-color: white;
      border-radius: 12rpx;
      margin: 30rpx;
      padding: 50rpx 32rpx 100rpx 32rpx;

      .notice-detail-title {
        // font-size: $wk-font-large;
        font-size: 34rpx;
        font-weight: 500;
        color: $dark;
        text-align: left;
        padding-bottom: 10rpx;
      }

      .notice-detail-time {
        font-size: $wk-font-mini;
        line-height: 100%;
        color: $light;
        text-align: left;
        margin-top: 15rpx;
        margin-bottom: 25rpx;
      }

      .notice-detail-content {
        font-size: $wk-font-medium;
        color: $gray;
        word-wrap: break-word;
        white-space: pre-wrap;
        border-top: 1rpx solid $border-color;
        padding-top: 50rpx;
      }
    }
  }
}
</style>
